<template>
  <div class="goodsGuanCreate">
    <el-card class="box-card">
      <!-- one------------------------------------------------------- -->
      <div slot="header" class="clearfix header">
        <span>创建商品属性</span>
        <el-button type="primary" round @click="createtwoFn">返回</el-button>
      </div>
      <!-- -------------------------------------------------------------- -->

      <!-- two------------------- -->
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-upload
              class="avatar-uploader"
              action="http://kg.zhaodashen.cn/v2/upload.php"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="商品名称" prop="goods_name">
                <el-input v-model="ruleForm.goods_name"></el-input>
              </el-form-item>
              <el-form-item label="商品数量" prop="goods_number">
                <el-input
                  v-model="ruleForm.goods_number"
                  style="width: 500px;"
                ></el-input>
              </el-form-item>
              <el-form-item label="商品价格" prop="market_price">
                <el-input
                  v-model="ruleForm.market_price"
                  style="width: 500px;"
                ></el-input>
              </el-form-item>
              <el-form-item label="促销价" prop="shop_price">
                <el-input
                  v-model="ruleForm.shop_price"
                  style="width: 500px;"
                ></el-input>
              </el-form-item>

              <el-form-item label="所属分类" prop="cat_id">
                <el-select v-model="ruleForm.cat_id" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.cat_id"
                    :label="item.cat_name"
                    :value="item.cat_id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 按钮 -->
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >提交</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
              <!-- ------------第一个基本完成------------------end -->
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="商品描述" name="second" prop="goods_desc">
            <div>
              <quill-editor
                ref="myTextEditor"
                v-model="content"
                :options="editorOption"
                style="height:600px;"
              ></quill-editor>
            </div>
          </el-tab-pane>

          <el-tab-pane label="商品相册" name="third" prop="gallery">
            <el-upload
              action="http://kg.zhaodashen.cn/v2/upload.php"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-tab-pane>

          <el-tab-pane label="商品属性" name="fourth">
            <!-- 没写这个效果 -->
          </el-tab-pane>
        </el-tabs>
      </template>

      <!-- ------------------------------------------------ -->
    </el-card>
  </div>
</template>

<script>
import { getFenleiIndex, postGoodsGuanCreate } from "@/api";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
  mounted() {
    getFenleiIndex().then(res => {
      // console.log(res)
      this.options = res.data.list;
    });
  },
  //引入外部组件
  components: {
    quillEditor
  },
  data() {
    return {
      //文本编辑器的属性
      content: "",
      editorOption: {
        placeholder: "编辑文章内容"
      },

      //默认显示第一个模块
      activeName: "first",

      imageUrl: "",

      dialogImageUrl: "",
      dialogVisible: false,

      //存放下拉框的数据的变量
      options: [],

      //用户管理用到的数据属性
      ruleForm: {
        goods_name: "",
        goods_number: "",
        market_price: "",
        shop_price: "",
        cat_id: "",
        thumb: "http://kg.zhaodashen.cn/v2/upload.php",
        goods_desc: ""
      },
      rules: {
        goods_name: [
          { required: true, message: "请输入商品类型", trigger: "blur" }
        ],
        goods_number: [
          { required: true, message: "请输入库存", trigger: "change" }
        ],
        market_price: [
          { required: true, message: "请输入价格", trigger: "change" }
        ],
        shop_price: [
          { required: true, message: "请输入价格", trigger: "change" }
        ],
        cat_id: [
          { required: true, message: "请选择所选分类", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    //文本编辑器的逻辑
    onEditorChange({ editor, html, text }) {
      this.content = html;
    },

    //头像上传的逻辑
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //两个不同地方的头像上传
    //点击头像上传的事件
    handleRemove(file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    //点击提交按钮
    submitForm(refName) {
      //this.$refs[formName].validate((valid) => {}
      this.$refs[refName].validate(isSuccess => {
        if (isSuccess) {
          this.$message.success("发送异步请求");
          postGoodsGuanCreate(this.ruleForm).then(res => {
            // console.log(res);
            if (res.meta.state == 201) {
              this.$message.success("成功");
              this.$router.push("/goods");
            }
          });
        }
      });
    },

    //点击重置
    resetForm(refName) {
      //  this.$refs[formName].resetFields();
      this.$refs[refName].resetFields();
    },

    //点击tab选项卡
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    //点击返回按钮
    createtwoFn() {
      this.$router.push({ path: "/goods" });
    }
  }
};
</script>

<style lang="scss" scoped>
.goodsGuanCreate {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .avatar-uploader {
    border-color: black;
    position: absolute;
    right: 50px;
    bottom: 150px;
    z-index: 2;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: pink;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
